<%@page import="com.mobiusws.reports.model.DashboardReportInfo"%>
<%@page import="java.util.List"%>
<%@page import="com.mobiusws.util.DashboardUtil"%>
<%@ page language="java" contentType="text/html; charset=utf-8" isELIgnored="false"%>
<% 
	List<DashboardReportInfo> infos= DashboardUtil.getDashboardReportsInfo();
	//DashboardUtil.getJson();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Chart Demo</title>
<style type="text/css">
	.onInit {
		border: solid 2px white;
	}
	.onSelect {
		border: solid 2px gray!important;
	}
	.onMouseOver {
		border: solid 2px gray!important;
	}
	/*
	.onMouseOut {
		border: solid 2px white;
	}
	*/
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/google-chart.js"></script>
<script type="text/javascript">
	$(function() {
		//alert('123');
		$("#stackChart").click(function() {
			drawChart('stack');
			$(this).removeClass("onMouseOver").addClass("onSelect");
			$("#columnChart").removeClass("onSelect");
		}).mouseover(function() {
			$(this).addClass("onMouseOver");
		}).mouseout(function() {
			$(this).removeClass("onMouseOver");
		});
		
		$("#columnChart").click(function() {
			drawChart('column');
			$(this).removeClass("onMouseOver").addClass("onSelect");
			$("#stackChart").removeClass("onSelect");
		}).mouseover(function() {
			$(this).addClass("onMouseOver");
		}).mouseout(function() {
			$(this).removeClass("onMouseOver");
		});
	});
</script>
<script type="text/javascript">
	google.load("visualization", "1", {
		packages : [ "corechart" ]
	});
	google.setOnLoadCallback(drawChart);
	
	function drawChart(chartType) {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Day');
		<%
			for(DashboardReportInfo info : infos) {
		%>
		data.addColumn('number', '<%=info.getName()%>');
		<%
			}
		%>

		var rows=<%=DashboardUtil.getJson()%>;
		data.addRows(rows);

		var options = {
			//width : 720,
			height : 440,
			//fontSize: 10,
			//isStacked : true,
			legend: {
				position: 'bottom',
				textStyle: {fontSize: 11}
			},
			//title : 'Reports Summary',
			//titlePosition: 'out',
			//titleTextStyle: {fontSize: 15},
			hAxis : {
				//title : 'Day',
				textStyle: {fontSize: 10},
				titleTextStyle : {
					color : 'red'
					//fontSize: 20
				}
			},
			vAxis: {
				//minValue: 400,
				gridlines: {count: 6},
				viewWindowMode: 'explicit',
				viewWindow: {
					min: 0
				}
			},
			chartArea: {left:50,top:40,width:"100%",height:"80%"}
		};
		
		options.isStacked=(chartType!='column');

		var chart = new google.visualization.ColumnChart(document
				.getElementById('chart_div'));
		chart.draw(data, options);
		google.visualization.events.addListener(chart, 'select', function() {
			var selection = chart.getSelection();
			var message="";
			for (var i = 0; i < selection.length; i++) {
			  var item = selection[i];
			  if (item.row != null && item.column != null) {
			    message += '{row:' + item.row + ',column:' + item.column + '}';
			  } else if (item.row != null) {
			    message += '{row:' + item.row + '}';
			  } else if (item.column != null) {
			    message += '{column:' + item.column + '}';
			  }
			}
			if (message == '') {
			  message = 'nothing';
			}
			
			var day=rows[item.row][0];
			var treeExtendTimeout=3000;
			var columnLabel=data.getColumnLabel(item.column);
			var keyword=getKeyword(columnLabel);
			
			function getKeyword(columnLabel) {
				var keyword="";
				switch(columnLabel) {
				<% 
					for(DashboardReportInfo info : infos) {
				%>
				case '<%=info.getName()%>':
					keyword='<%=info.getId()%>';
					break;
				<%
					}
				%>
				}
				return keyword;
			}
			
			function extendDailyMenu() {
				$("span:contains('Daily Report')",parent.document).parent().prev().click();
			}
			
			function showReport(keyword) {
				$("#selectedDate",parent.document).val(day);
				//$("span:contains('"+keyword+"'):eq(0)",parent.document).parent().click();
				//alert($("#centerPanelForm\\:dashboard",parent.document).attr("id"));
				//$("#centerPanelForm\\:dashboard",parent.document).show();
				$("#centerPanelForm\\:"+keyword+" a",parent.document).click();
				//$("#centerPanelForm\\:dashboard",parent.document).hide();
				
			}
			
			//var length=$("span:contains('"+keyword+"'):eq(0)",parent.document).length;
			/*
			if(length==0) {
				extendDailyMenu();
				setTimeout(function() {showReport(keyword);}, treeExtendTimeout);
			}
			*/
			showReport(keyword);
			//$("span:contains('International Gateway')",parent.document).parent().click();
			
			//alert(length);
		});
	}
</script>
</head>
<body>

	<div style="margin-bottom: 15px;">
		 <span style="font: bold 15px arial; margin: 0 30px 0 0;">Reports Summary</span>
		<input type="image" id="stackChart" width="32px" height="23px" class="onSelect onInit" title="stacked chart" src="css/images/stackedchart.gif" />
		<span style="width:30px;">&nbsp;</span>
		<input type="image" id="columnChart" width="32px" height="23px" class="onInit" title="column chart" src="css/images/columnchart.gif" />
	</div>
	 <!-- 
	<table>
		<tr>
			<td><span style="font: bold 15px arial; margin: 0 30px 0 0;">Reports Summary</span></td>
			<td><input type="image" id="stackChart" width="32px" height="23px" class="onSelect onInit" title="stacked chart" src="css/images/stackedchart.gif" /></td>
		</tr>
	</table>
	 -->
	<div id="chart_div" style="margin:0;padding:0;"></div>
</body>
</html>